import React from "react";
import { inject, observer } from "mobx-react";
import { axiosGet } from "../../../axios";
import { url, commentmv } from "../../../api";
import formatDate from "../../../utils/timeStamp";

@inject("mv")
@observer
class MvDetailCommet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      comment: "",
    };
  }
  //  获取评论
  getComment() {
    axiosGet(
      url,
      commentmv,
      `id=${this.props.mv.mvDetail.id}`,
      "limit=10"
    ).then((data) => {
      this.setState({
        comment: data.comments,
      });
    });
  }
  render() {
    if (this.props.mv.mvDetail.id) {
      this.getComment();
    }
    return (
      <div style={{ float: "left",width:'65%',marginTop:'15px' }}>
        <h3>精彩评论</h3>
        <ul className="comment">
          {this.state.comment &&
            this.state.comment.map((item, index) => {
              return (
                <li key={item.commentId} className='item'>
                  <img src={item.user.avatarUrl} alt=""></img>
                  <div className="context">
                    <p className='userName'>
                      {item.user.nickname}: <span style={{color:'#000'}}>{item.content}</span>
                    </p>
                    <p>{formatDate(item.time)}</p>
                  </div>
                </li>
              );
            })}
        </ul>
      </div>
    );
  }
}
export default MvDetailCommet;
